<template>
    <view class="comment-item bg-ff p-20 borderRadius-20 m-botoom-20">
        <view class="  "
           >
            <view class="header flex-row jc-between ai-center border-bottom p-botoom-10">
                <view class="shop-info" v-if="typeFrom=='my'">
                    <view>{{commentItem.shop_info.shop_name}}</view>
                    <u-rate :count="5" size="24" v-model="commentItem.rate"></u-rate>
                </view>
                <view class="flex-row ai-center p-botoom-10" v-else>
                    <image :src="commentItem.user_info.headImageUrl" style="width: 70rpx;height: 70rpx; border-radius: 50%;" mode=""></image>
                    <view class="size-24 color-6 m-left-10 text-center ">
                       <view class="p-botoom-10">{{commentItem.user_info.name}}</view>
                        <u-tag :text="commentItem.user_info.level_name" mode="dark" size="mini" type="warning" shape="circle" />
                    </view>
                </view>
                <view class="goods-info flex-row ai-center"  v-if="typeFrom=='my'">
                    <image :src="order_item.images" style="width: 50rpx;height: 50rpx;margin: 0 5px;"
                        v-for="(order_item,index) in commentItem.order_items" mode="" :key="index"></image>
                    <text class="size-24 color-9" v-if="commentItem.order_items.length>0">共计{{ commentItem.order_items.length}}件商品</text>
                </view>
                <view class="size-24 color-9 text-center" v-else>
                    <u-rate :count="5" size="24" v-model="commentItem.rate"></u-rate>
                    <view class="">
                        {{commentItem.created_at}}
                    </view>
                </view>
            </view>
            <!-- 我的评价 -->
            <view class="content p-top-20 p-botoom-20 border-bottom" v-for="(contentItem,contentIndex) in commentItem.comments" :key="contentIndex" v-if="typeFrom=='my'" >
                <view class="info flex-row ">
                    <view class="color-6 size-28 line-height-48">
                        <text class="color-3">我：</text>
                        <text class=" m-right-20">{{contentItem.comment}}</text>
                        <u-loading mode="flower" size="24" v-if="contentItem.status==1"></u-loading>
                        <text class="m-left-10" style="color: #ff00ff;" v-if="contentItem.status==1">审核中</text>
                        <u-icon name="checkbox-mark" color="#74BEFF" size="24"  v-if="contentItem.status==2"></u-icon>
                        <text class="m-left-10" style="color: #74BEFF;" v-if="contentItem.status==2">已过审</text>
                        <u-icon name="close" color="#ff0000" size="24"  v-if="contentItem.status==3"></u-icon>
                        <text class="m-left-10" style="color: #ff0000;" v-if="contentItem.status==3">未过审</text>
                    </view>
                </view>
                <view class="first-image  " v-if="contentItem.images.length>0">
                    <image class="borderRadius-10" src="../../../static/default-avatar.jpg"
                        style="width: 120rpx;height: 120rpx;margin: 15rpx;" v-for="(imageItem,imageIndex) in contentItem.images" mode=""></image>
                </view>
                <view class="shop-replay color-9" v-if="contentItem.replay">
                    商家回复：<text class=" m-right-20"> {{contentItem.replay}}</text>
                </view>
            </view>
            <!-- 商家详情显示的评价 -->
            <view class="content p-top-20 p-botoom-20 border-bottom" v-for="(contentItem,contentIndex) in commentItem.comments" :key="contentIndex" v-if="contentItem.status==2&&typeFrom=='goodsIndex'" >
                <view class="info flex-row ">
                    <view class="color-6 size-28 line-height-48">
                        <text class="color-3">我：</text>
                        <text class=" m-right-20">{{contentItem.comment}}</text>
                    </view>
                </view>
                <view class="first-image  " v-if="contentItem.images.length>0">
                    <image class="borderRadius-10" src="../../../static/default-avatar.jpg"
                        style="width: 120rpx;height: 120rpx;margin: 15rpx;" v-for="(imageItem,imageIndex) in contentItem.images" mode=""></image>
                </view>
                <view class="shop-replay color-9"  v-if="contentItem.replay">
                    商家回复：<text class=" m-right-20"> {{contentItem.replay}}</text>
                </view>
            </view>
            
            <view class="footer-btn text-right p-top-10" v-if="typeFrom!='goodsIndex'"> 
                <g-button style="margin: 0 5px;" size="mini" type="danger"  >
                    删除评论</g-button>
                <g-button style="margin: 0 5px;" size="mini" type="primary"  >
                    撤回评论</g-button>
                <g-button style="margin: 0 5px;" size="mini" type="effect"  >
                    追加评论</g-button>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        props: {
            commentItem: {
                type: Object,
            },
            typeFrom:{
                type: String,
            },
        },
        data() {
            return {
                 
            }
        },
    }
</script>

<style lang="scss" scoped>
</style>
